<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --dark-bac: #e2cdcd;
        --dark-text: #61453e;
        --light-bac: #050b48;
        --light-text: #d1d1f2;
      }

      .dark {
        --bg-body: var(--dark-bac);
        --bg-text: var(--dark-text);
      }

      .light {
        --bg-body: var(--light-bac);
        --bg-text: var(--light-text);
      }
      body {
        background-color: var(--bg-body);
        color: var(--bg-text);
        transition: 0.7s ease-in-out;
      }

      .wrap {
        width: 600px;
        margin: 180px auto;

        font-size: 30px;
        text-align: center;
        /* line-height: 30px; */
        font-weight: 600;
      }

      .time {
        font-size: 70px;
        margin: 30px;
        font-weight: 600;
      }

      button {
        border-radius: 10px;
        background-color: var(--bg-text);
        width: 80px;
        height: 40px;
        color: var(--bg-body);
        box-shadow: 1px 1px 6px 0px var(--bg-text);
      }

      button:hover {
        background-color: var(--bg-body);
        color: var(--bg-text);
        box-shadow: -2px -1px 3px 0px inset var(--bg-text);
      }
    </style>
  </head>

  <body class="dark">
    <div class="wrap">
      <div id="year">2013年5月9日星期六</div>
      <div class="time">14:43:40</div>
      <button id="btn">停止更新</button>
      <button id="bac">日间模式</button>
    </div>

    <script>
      clock();
      var timer = setInterval(clock, 1000); // 初始化时钟定时器

      function clock() {
        var today = new Date();
        var Year = today.getFullYear();
        var Month = today.getMonth() + 1;
        var Dates = today.getDate();
        var Day = today.getDay();
        const weekdays = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        var year = document.querySelector("#year");
        year.innerHTML = `${Year}年${Month}月${Dates}日${weekdays[Day]}`;

        var Hours =
          today.getHours() >= 10 ? today.getHours() : "0" + today.getHours();
        var Minutes =
          today.getMinutes() >= 10
            ? today.getMinutes()
            : "0" + today.getMinutes();
        var Seconds =
          today.getSeconds() >= 10
            ? today.getSeconds()
            : "0" + today.getSeconds();

        var time = document.querySelector(".time");
        time.innerHTML = `${Hours}:${Minutes}:${Seconds}`;
      }

      var btn = document.querySelector("button");

      // 标记一个变量来控制按钮状态
      var flag = true;
      btn.onclick = () => {
        if (flag) {
          clearInterval(timer);
          btn.innerHTML = "继续计时";
        } else {
          timer = setInterval(clock, 1000);
          btn.innerHTML = "停止更新";
        }
        flag = !flag;
      };

      var flag1 = true;

      var toggleColor = document.querySelector("#bac");
      toggleColor.onclick = () => {
        if (flag1) {
          toggleColor.innerHTML = "夜间模式";
        } else {
          toggleColor.innerHTML = "日间模式";
        }
        flag1 = !flag1;

        btn.classList.toggle("light");
        btn.classList.toggle("dark");
        document.querySelector("body").classList.toggle("light");
        document.querySelector("body").classList.toggle("dark");
      };
    </script>
  </body>
</html>
